<template>
    <div>
        <x-header :left-options="{backText: ''}">活动详情</x-header>
        <card style="margin-top:0px;">
            <img slot="header" src="../assets/actDetail1.jpg" style="width:100%;display:block;height: 150px">
            <div slot="content" class="card-padding">
                <p style="font-size:17px;line-height:1.2;text-align:center;margin-top:5px;">{{activity.name}}</p>
                <group :title="activity.introduction">
                    <cell title="时间">
                        <clocker :time="date" slot="value"></clocker>
                    </cell>
                    <cell :title="('人数')" :value="activity.personNum"></cell>
                    <cell :title="('地点')" :value="activity.place"></cell>
                    <cell :title="('预算')" :value="activity.budget"></cell>
                    <cell :title="('发起人')" :value="activity.sponsorName"></cell>
                    <cell :title="('查看相关活动')" :link="{path:'/relatedActivity',
                    query: {actId: this.actId, sponsorId: this.sponsorId}}"></cell>
                </group>
            </div>
        </card>
        <divider></divider>
        <toast v-model="show" type="text">{{msg}}</toast>
        <box gap="10px 10px">
            <x-button type="primary" @click.native="submit(activity.id)">加入</x-button>
        </box>
    </div>
</template>

<script>
    import {Divider, Card, XHeader, Clocker, Group, Cell, XButton, Box, Toast, Scroller} from 'vux'
    import request from 'superagent'

    export default {
        components: {
            Card,
            Divider,
            XHeader,
            Clocker,
            Group,
            Cell,
            XButton,
            Box,
            Toast,
            Scroller
        },
        data() {
            return {
                activity: '',
                date: '2017-01-01',
                show: false,
                msg: '加入活动成功~',
                sponsorId: '',
                actId: ''
            }
        },
        created: function () {
            this.actId = this.$route.query.actId;
            this.sponsorId = this.$route.query.sponsorId;
            this.getData(this.actId);
        },
        methods: {
            getData(actId) {
                request.get('/wx/activity/activitydetail')
                    .query({actId: actId})
                    .end((err, res) => {
                        console.log(res);
                        if (res.ok) {
                            this.activity = JSON.parse(res.text).data;
                            this.date = this.activity.startDate.split(' ')[0];
                            this.activity.personNum = this.activity.personNum + ' / '
                                + this.activity.totalPersonNum
                        } else {
                            console.log('请求数据失败');
                        }
                    });
            },
            submit(id) {
                this.$router.push({path: 'activityJoin', query: {actId: id}});
            },
            reload () {
                location.reload();
            }
        }
    }
</script>


<style scpoed>
    .align-middle {
        text-align: center;
    }
</style>